import { envMap, zoneMap } from '@/views/cmdb/config'

export const serviceColumns = _this => [
  {
    title: '名称',
    key: 'name',
    sortable: true,
    render: (h, { row }) => {
      return <router-link to={'/middle/service/' + row.id} style='color: #2d8cf0'>{row.name}</router-link>
    }
  },
  {
    title: '描述',
    key: 'description',
    sortable: true,
    render: (h, { row }) => {
      return <span>{row.description}</span>
    }
  },
  {
    title: '类型',
    key: 'service_type',
    width: 80,
    sortable: true,
    render: (h, { row }) => {
      return <span>{row.serviceType}</span>
    }
  },
  {
    title: '环境',
    key: 'env',
    width: 100,
    sortable: true,
    render: (h, { row }) => {
      return <Tag color={envMap[row.env].color}>{envMap[row.env].name}</Tag>
    }
  },
  {
    title: '区域',
    key: 'zone',
    width: 100,
    sortable: true,
    render: (h, { row }) => {
      return <Tag color={zoneMap[row.zone].color}>{zoneMap[row.zone].name}</Tag>
    }
  },
  {
    title: '节点数量',
    key: 'assets',
    render: (h, { row }) => {
      return <el-popover
        placement='right'
        style='cursor:pointer'
        trigger='hover'>
        <div>
          <div>
            <Icon type='md-cube' /> {row.name}
            {/* <span style='font-size:1px;color:red;font-weight:500;float:right'>(一共有)</span> */}
          </div>
          <Divider style='margin:10px 0' />
          <div style='max-height: 300px;overflow:auto;margin-left:20px'>
            {row.assets.map(item => <div>
              <span><Icon type='logo-windows' />
                {/* <router-link to={'/appid/' + item.assets.id} style='color: #2d8cf0'>{item.assets.businessIp}</router-link> */}
                {item.assets.hostname}({item.assets.businessIp})
                <Divider style='margin:10px 0' /></span>
            </div>)}
          </div>
        </div>
        <el-tag slot='reference' size='mini' type='success'>{row.assets.length}</el-tag>
      </el-popover>
    }
  },
  {
    title: '关联APP数量',
    key: 'app_names',
    render: (h, { row }) => {
      return <el-popover
        placement='right'
        style='cursor:pointer'
        trigger='hover'>
        <div>
          <div>
            <Icon type='md-cube' /> {row.name}
            {/* <span style='font-size:1px;color:red;font-weight:500;float:right'>(一共有)</span> */}
          </div>
          <Divider style='margin:10px 0' />
          <div style='max-height: 300px;overflow:auto;margin-left:20px'>
            {row.appNames.map(item => <div>
              <span><Icon type='logo-angular' />
                {/* <router-link to={'/appid/' + item.assets.id} style='color: #2d8cf0'>{item.assets.businessIp}</router-link> */}
                {item.appName}
                <Divider style='margin:10px 0' /></span>
            </div>)}
          </div>
        </div>
        <el-tag slot='reference' size='mini' type='success'>{row.appNames.length}</el-tag>
      </el-popover>
    }
  },
  {
    title: '创建时间',
    key: 'create_time',
    sortable: true,
    render: (h, { row }) => {
      return <span>{row.createTime}</span>
    }
  },
  {
    title: '更新时间',
    key: 'update_time',
    sortable: true,
    render: (h, { row }) => {
      return <span>{row.updateTime}</span>
    }
  },
  {
    title: '操作',
    key: 'operate',
    render: (h, { row }) => {
      return <div>
        <el-tooltip className='item' effect='dark' content='修改' placement='top-end'>
          <el-link
            underline={false}
            vOn:click={() => {
              _this.showServiceActionModal = true
              _this.serviceInfo = row
              _this.action.type = 'update'
              _this.action.title = '更新'
            }} size='small' type='primary'>修改
          </el-link>
        </el-tooltip>
        <el-divider direction='vertical' />
        <el-tooltip className='item' effect='dark' content='删除' placement='top-end'>
          <el-link
            underline={false}
            vOn:click={() => {
              _this.showServiceDeleteModal = true
              _this.serviceInfo = row
            }} size='small' style='font-size:13px;' type='danger'>删除
          </el-link>
        </el-tooltip>
      </div>
    }
  }
]
